<template>
  <div class="body block is-flex">
    <tabs animation="slide" :only-fade="false">
      <tab-pane label="Windows" selected>
        <ul class="downloads">
          <li>
            <a target="_blank" href="//cdn.kuaiyudian.com/client/Data-Manager-win32-v1.0.0.zip">Data-Manager-win32-v1.0.0.zip</a>
          </li>
          <li>
            <a target="_blank" href="//cdn.kuaiyudian.com/client/Data-Manager-win64-v1.0.0.zip">Data-Manager-win64-v1.0.0.zip</a>
          </li>
        </ul>
      </tab-pane>
      <tab-pane label="Linux">
        <ul class="downloads">
          <li>
            <a target="_blank" href="//cdn.kuaiyudian.com/client/Data-Manager-Linux64-v1.0.0.zip">Data-Manager-Linux64-v1.0.0.zip</a>
          </li>
        </ul>
      </tab-pane>
      <tab-pane label="Mac OS">
        <ul class="downloads">
          <li>
            <a target="_blank" href="//cdn.kuaiyudian.com/client/Data-Manager-MacOS-v1.0.0.zip">Data-Manager-MacOS-v1.0.0.zip</a>
          </li>
        </ul>
      </tab-pane>
    </tabs>
  </div>
</template>
<script>
import {
  Tabs,
  TabPane
} from 'vue-bulma-tabs'

export default {
  components: {
    Tabs,
    TabPane
  }
}
</script>
<style lang="scss">
.body {
  min-height: 400px;
  ul.downloads >li {
    margin-top: 10px;
  }
}
</style>
